<template>
    <el-form ref="formRef" :model="form" labelWidth="100px" label-suffix="：">
        <el-form-item label="节点名称">
            <el-input v-model="form.nodeName"></el-input>
        </el-form-item>
        <el-form-item label="节点ID">
            <el-input v-model="form.typeConcatName" disabled></el-input>
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
    </el-form>
    <dialog-footer @ok="submitForm" @cancel="cancel"/>

</template>

<script setup>
import {defineComponent, ref, onMounted, reactive} from 'vue';
import {flowServiceStore} from '@data/store/flow';

const flowCount = flowServiceStore();
import {storeToRefs} from 'pinia';

const {flowData} = storeToRefs(flowCount);

defineComponent({
    name: 'Default',
});
const props = defineProps({
    detailObject: {
        type: Object,
        default: () => {
        },
    },
})
const form = reactive({
    nodeName: '',
    name: '',
    remark: '',

    GUI: {
        xloc: 1,
        yloc: 1,
        draw: 'Y'
    }
});


const emit = defineEmits(['cancel']);

onMounted(() => {
    form.nodeName = flowData.value[props.detailObject.id]?.nodeName || props.detailObject.data.label;
    form.remark = flowData.value[props.detailObject.id]?.remark || '';
    form.name = props.detailObject.id;
    form.typeConcatName = `${props.detailObject.id}(${form.type}-${props.detailObject.id})`;
})


const submitForm = () => {
    form.fields.field.forEach(fieldItem => {
      form.fieldList.push(fieldItem);
    });
    flowCount.setFlowData(
        {
            ...flowData.value,
            [props.detailObject.id]: form
        }
    )
    // 触发数据更新事件
    // emit('update-data', {
    //   id: props.detailObject.id,
    //   data: form
    // });

    console.log(flowData.value);
    emit('cancel');

}
const cancel = () => {
    emit('cancel');
}
</script>

<style scoped>

</style>